import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';

export function Footer() {
  const { t } = useTranslation();

  return (
    <footer className="bg-white text-gray-800 pt-16 pb-8 shadow-lg w-full">

      <div className=" mx-auto px-4 w-full">
        {/* 所有菜单在一行显示 */}
        <div className="flex flex-wrap justify-between mb-12 w-[80%] mx-auto">
          {/* 数字支付 */}
          <div className="mx-6 mb-6 md:mb-0">
            <h3 className="text-lg font-semibold mb-4 text-gray-900">{t('footer.digitalPayment')}</h3>
            <ul className="space-y-2">
              <li><Link to="/payment-collection" className="text-gray-600 hover:text-blue-500 transition-colors" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>{t('header.paymentCollection')}</Link></li>
              <li><Link to="/cross-border-payment" className="text-gray-600 hover:text-blue-500 transition-colors" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>{t('header.crossBorderPayment')}</Link></li>
              <li><Link to="/foreign-card-service" className="text-gray-600 hover:text-blue-500 transition-colors" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>{t('header.foreignCardService')}</Link></li>
            </ul>
          </div>

          {/* 解决方案 */}
          <div className="mx-6 mb-6 md:mb-0">
            <h3 className="text-lg font-semibold mb-4 text-gray-900">{t('footer.solution')}</h3>
            <ul className="space-y-2">
              <li><Link to="/solutions/vertical-industry" className="text-gray-600 hover:text-blue-500 transition-colors" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>{t('header.verticalIndustries')}</Link></li>
              <li><Link to="/solutions/retail-store" className="text-gray-600 hover:text-blue-500 transition-colors" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>{t('header.retailStores')}</Link></li>
              <li><Link to="/solutions/small-bank" className="text-gray-600 hover:text-blue-500 transition-colors" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>{t('header.smallBanks')}</Link></li>
            </ul>
          </div>

          {/* 新闻中心 */}
          {/* <div className="mx-6 mb-6 md:mb-0">
            <h3 className="text-lg font-semibold mb-4 text-gray-900">{t('header.newsCenter')}</h3>
            <ul className="space-y-2">
              <li><Link to="/news-center/company" className="text-gray-600 hover:text-blue-500 transition-colors" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>{t('header.companyNews')}</Link></li>
              <li><Link to="/news-center/media" className="text-gray-600 hover:text-blue-500 transition-colors" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>{t('header.mediaCoverage')}</Link></li>
              <li><Link to="/news-center/resources" className="text-gray-600 hover:text-blue-500 transition-colors" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>{t('header.mediaResources')}</Link></li>
            </ul>
          </div> */}

          {/* 关于豆豆 */}
          <div className="mx-6 mb-6 md:mb-0">
            <h3 className="text-lg font-semibold mb-4 text-gray-900">{t('header.aboutMamepay')}</h3>
            <ul className="space-y-2">
              <li><Link to="/about/introduction" className="text-gray-600 hover:text-blue-500 transition-colors" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>{t('header.companyIntroduction')}</Link></li>
              <li><Link to="/about/culture" className="text-gray-600 hover:text-blue-500 transition-colors" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>{t('header.corporateCulture')}</Link></li>
              <li><Link to="/about/partners" className="text-gray-600 hover:text-blue-500 transition-colors" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>{t('header.partners')}</Link></li>
              <li><Link to="/about/contact" className="text-gray-600 hover:text-blue-500 transition-colors" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>{t('header.contact')}</Link></li>
            </ul>
          </div>

          {/* 投资者关系 */}
          {/* <div className="mx-6 mb-6 md:mb-0">
            <h3 className="text-lg font-semibold mb-4 text-gray-900">{t('header.investorRelations')}</h3>
            <ul className="space-y-2">
               <li><Link to="/investor-relations/regular-reports" className="text-gray-600 hover:text-blue-500 transition-colors" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>{t('header.regularReports')}</Link></li>
               <li><Link to="/investor-relations/activities" className="text-gray-600 hover:text-blue-500 transition-colors" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>{t('header.investorActivities')}</Link></li>
               <li><Link to="/investor-relations/news" className="text-gray-600 hover:text-blue-500 transition-colors" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>{t('header.newsUpdates')}</Link></li>
            </ul>
          </div> */}


        </div>

        {/* 其他内容在另一行 */}
        <div className="border-t border-gray-200 pt-8 mt-8">
          <div className="bg-gray-50 rounded-xl p-6">
            <div className="flex flex-col md:flex-row justify-between items-center">
              <div className="flex flex-col md:flex-row items-center md:space-x-8 mb-6 md:mb-0">
                <div className="flex items-center space-x-2 mb-4 md:mb-0">
                  <div className="w-12 h-12 flex items-center justify-center">
                    <img
                      src="/memapay-logo.png"
                      alt={t('header.logo')}
                      className="w-full h-full"
                    />
                  </div>
                  <h2 className="text-xl font-bold text-gray-900">{t('header.logo')}</h2>
                </div>

                <p className="text-gray-600 text-sm mb-4 md:mb-0 max-w-md">
                  {t('hero.subtitle')}
                </p>
              </div>

              <div className="flex flex-col md:flex-row items-center md:space-x-8">
                <div className="flex space-x-4 mb-4 md:mb-0">
                  <a href="#" className="text-gray-400 hover:text-blue-500 transition-colors w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center">
                    <i className="fa-brands fa-facebook"></i>
                  </a>
                  <a href="#" className="text-gray-400 hover:text-blue-500 transition-colors w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center">
                    <i className="fa-brands fa-twitter"></i>
                  </a>
                  <a href="#" className="text-gray-400 hover:text-blue-500 transition-colors w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center">
                    <i className="fa-brands fa-linkedin"></i>
                  </a>
                  <a href="#" className="text-gray-400 hover:text-blue-500 transition-colors w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center">
                    <i className="fa-brands fa-instagram"></i>
                  </a>
                </div>


              </div>
            </div>

            <div className="flex flex-col md:flex-row justify-between items-center mt-6 pt-6 border-t border-gray-200">
              <div className="flex flex-col md:flex-row items-center md:space-x-8 mb-4 md:mb-0">
                <p className="text-gray-600 text-sm mb-2 md:mb-0">{t('footer.rights')}</p>
                <div className="flex space-x-6">
                  <Link to="/privacy" className="text-gray-500 hover:text-blue-500 text-sm transition-colors">{t('footer.privacy')}</Link>
                  <Link to="/terms" className="text-gray-500 hover:text-blue-500 text-sm transition-colors">{t('footer.terms')}</Link>
                </div>
              </div>

              <div className="flex items-center space-x-6">
                <div className="flex items-center">
                  <i className="fa-solid fa-phone text-blue-500 mr-2"></i>
                  <span className="text-gray-600 text-sm">{t('footer.phone')}</span>
                </div>
                <div className="flex items-center">
                  <i className="fa-solid fa-envelope text-blue-500 mr-2"></i>
                  <span className="text-gray-600 text-sm">{t('footer.email')}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}